<template>
  <!-- 需要做分页 -->
  <div id="index-main" style="height: 100%">
    <!-- 搜索区域 -->
    <div class="select_search">
      <el-row>
        <el-col :offset="17" span="3">
          <el-select placeholder="选择类别" v-model="formLabelAlign.typeid">
            <el-option label="0" value="0"></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-col>
        <el-col span="4">
          <el-input
            type="text"
            suffix-icon="iconfont el-icon-search"
            id="search"
            v-model="formLabelAlign.goodname"
          ></el-input>
        </el-col>
      </el-row>
    </div>
    <div class="index-buttom">
      <div class="classes">
        <div class="text">
          <span class="chinese">环境</span>
          <span class="english">Environment</span>
          <a href="#/admin/index"><i class="el-icon-arrow-right"></i></a>
        </div>
        <div class="div_">
          <div class="div_n" v-for="n in 4" :key="n">
            <img src="../../common/picture/ZT.png" />
            <span class="floattext">名称</span>
          </div>
        </div>
        <ul class="class_ul">
          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>

          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
        </ul>
      </div>
      <br />
      <div class="classes">
        <div class="text">
          <span class="chinese">艺术品</span>
          <span class="english">Artwork</span>
          <a href="#/admin/goods/goodsindex"
            ><i class="el-icon-arrow-right"></i
          ></a>
        </div>
        <ul class="class_ul">
          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
        </ul>
      </div>
    </div>
    <table>
      <!-- 把div for的数据放到table -->
    </table>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="currentpage"
      :page-size="pagesize"
      layout="total, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 30px; text-align: center"
    >
      <el-button
        style="
          border: 1px solid;
          border-color: #b4bccc;
          padding: 0px;
          margin-left: 6px;
        "
        size="mini"
        @click="handleCurrentChange"
        >GO</el-button
      >
    </el-pagination>
  </div>
</template>

<script>
import { getbyType } from "crm/goods/goods.js";
export default {
  data() {
    return {
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      total: 0,
    };
  },
  methods: {
    //获取页面初始化数据..
    getGoodsbyType() {
      const payload = {};
      // payload.typeid=
      payload.pageSize = this.pageSize;
      payload.currentPage = this.currentPage;
      getbyType(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.tableData = res.data.goods;
            this.total = res.data.total;
            console.log(this.tableData);
            console.log(this.total);
          } else {
            alert("数据加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },
  },
};
</script>
<style scoped>
.index-main {
  display: flex;
}

.select_search {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0%;
  flex-direction: row-reverse;
}
.search {
  margin: 0% 3%;
  width: 56px;
}
/deep/.el-input__inner {
  background-color: #2f2f2f;
  border: 5px solid #292929;
  border-radius: 20px;
  font-family: "Youshebiaotihei";
  color: #787878;
  font-size: 20px;
}
.div_ {
  width: 100%;
  overflow: hidden;
  padding: 10px 0px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 81px;
}
.div_n {
  display: inline-block;
  position: relative;
  width: calc(25%-30px);
  margin-right: 50px;
  display: inline-block;
}
/* 悬浮的文字 */
.floattext {
  position: absolute;
  bottom: 30px;
  right: 50px;
  color: #fdfdfd;
  font-family: "Youshebiaotihei";
  font-size: 30px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.index-buttom {
  width: 100%;
  height: 100%;
  margin: auto;
}
.classes {
  display: flex;
  flex-direction: column;
}
.class_ul {
  margin-top: 30px;
  margin-left: 1%;
}
.line {
  width: 23%;
  height: 300px;
  list-style-type: none;
  margin-left: 20px;
  float: left;
  /* height:200px; */
  margin-bottom: 8px;
  background: rgb(68, 67, 67);
}

.imgclass {
  width: 30%;
  height: 120px;
}
.img2 {
  width: 30%;
  height: 120px;
  margin-bottom: 30px;
  margin-left: 0.3px;
  border-radius: 2%;
}
.text {
  display: flex;
  font-family: "Youshebiaotihei";
}
.chinese {
  color: #a2662f;
  font-size: 28px;

  margin-left: 80px;
}
.english {
  color: #ead3c2;
  font-size: 20px;
  margin-left: 20px;
  margin-top: 5px;
}
.el-icon-arrow-right {
  color: #ead3c2;
  font-size: 20px;
  margin-left: 15px;
  margin-top: 8px;
}
/* 搜索区域 */
.select_search {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0%;
  flex-direction: row-reverse;
}
.search {
  margin: 0% 3%;
  width: 56px;
}
</style>